<template>
	<div class="invoice-management">
		<menu-content-layout title="增票资质">
			<template v-slot:icon>
				<img src="~/assets/images/invoice-management1.png" alt="">
			</template>

			<template v-slot:content>
				<div class="content-wrap" v-if="$route.name === 'InvoiceManagement'">
					<m-button @click="pushToAdd">＋ 新增发票信息</m-button>

					<div class="list">
						<div class="item" v-for="(item, index) in list" :key="index">
							<div class="title">
								<div class="owner">{{ item.type==0?'单位':'个人' }}</div>
								<div class="is-default" v-if="item.is_default">默认</div>
							</div>
							<div class="invoice-head">名称：{{ item.consignee }}</div>
							<div class="bank">开户银行：{{ item.bank }}</div>
							<div class="address">
								公司地址：
								{{ item.company_address }}
							</div>
							<div class="account">银行账号：{{ item.card_id }}</div>
							<div class="phone">电话：{{ item.tel }}</div>
							<div class="btns">
								<div class="edit">
									<m-button class="btn" width="100" type="grey" size="mini" @click="pushToEdit(item.id)">编辑</m-button>
								</div>
								<div class="default">
									<m-button class="btn" v-if="!item.is_default" width="100" type="grey" size="mini" @click="showTc(item.id,'default')">设为默认</m-button>
								</div>
								<div class="delete">
									<m-button class="btn" width="100" type="grey" size="mini" @click="showTc(item.id,'del')">删除</m-button>
								</div>
							</div>
						</div>
						<nodata message="暂无发票" :status="listStatus"></nodata>
					</div>
					<m-pagination :pagination="total" :page-size="limit" @changePage='changeThisPage' />
				</div>

				<router-view v-else />
			</template>
		</menu-content-layout>
		<m-dialog title="平台提示" :show-dialog.sync="showDialog">
		  <div class="text f16 textcenter mbt30">
		   {{ showMsg}}
		  </div>
		  <div class="btns" style="display: flex; justify-content: center;">
		    <m-button width="180" type="dark" @click="closeTc" style="margin-right: 10px;">取消</m-button>
		    <m-button width="180" @click="confirm">确定</m-button>
		  </div>
		</m-dialog>
	</div>
</template>

<script>
import MenuContentLayout from '@/components/common/menu-content-layout/MenuContentLayout'
import MButton from '@/components/common/m-button/MButton'
import MDialog from '@/components/common/m-dialog/MDialog'
import { getInvoice,setDefInvoice,delInvoice } from '@/request/api'

export default {
	name: 'InvoiceManagement',
	components: {
		MButton,
		MDialog,
		MenuContentLayout
	},
	data() {
		return {
			list: [],
			page: 1,
			listStatus: 1,
			total: 0,
			limit: 5,
			showMsg: '',
			showDialog: false,
			optionId: ''
		}
	},
	created() {
		this.getList()
	},
	watch:{
		$route(now,old){
			if(old.name=="AddInvoice"){
				this.page=1
				this.getList()
			}
		}
	},
	methods: {
		getList() {
			this.listStatus = 1
			this.list = []
			let data = {
				limit: this.limit,
				page: this.page
			}
			getInvoice(data).then(res => {
				this.list = res.data.data
				this.total = res.data.total
				if (this.total == 0) {
					this.listStatus = 0
				} else {
					this.listStatus = 2
				}
				window.scrollTo({top: 0})
			}).catch(err => {
				this.$message.error(err.message)
			})
		},
		changeThisPage(page) {
			this.page = page
			this.getList()
		},
		showTc(id,option){
			switch (option){
				case 'del':
				this.showMsg = '确定删除该发票?'
				break
				case 'default':
				this.showMsg = '确定设置为默认发票？'
				break
			}
			this.showDialog = true
			this.optionId = id
			this.option = option
		},
		closeTc(){
			this.showDialog = false
			this.option = ''
			this.optionId = ''
		},
		confirm(){
			this.showDialog = false
			switch (this.option){
				case 'del':
					this.dele()
				break
				case 'default':
					this.default()
				break
			}
		},
		dele(){
			let that = this
			that.$toastVant.loading('请稍后...')
			delInvoice(this.optionId).then(res => {
				setTimeout(function(){
					that.$message.success('删除成功!')
					that.getList()
				},500)
			}).catch(err => {
				this.$message.error(err.message)
			})
		},
		default(){
			let that = this
			that.$toastVant.loading('请稍后...')
			setDefInvoice(this.optionId).then(res => {
				setTimeout(function(){
					that.$message.success(res.message)
					that.getList()
				},500)
			}).catch(err => {
				this.$message.error(err.message)
			})
		},
		pushToAdd() {
			this.$router.push({
				path: '/profile/invoice-management/add-invoice'
			})
		},
		pushToEdit(id) {
			this.$router.push({
				path: '/profile/invoice-management/add-invoice?id=' + id
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/style/common.scss";
	.invoice-management {
		/deep/ .el-button--mini {
			padding: 15px 15px;
			font-size: 12px;
			border: 1px solid #eee !important;
		}
		/deep/ .el-button--mini:hover{
			color: #fff !important;
			background: $theme-color-1 !important;
		}
		.list {
			margin-top: 15px;

			.item {
				border: solid 1px #eaeaea;
				margin-bottom: 15px;
				padding: 15px;
				position: relative;
				>div {
					margin-bottom: 10px;
					display: flex;
					align-items: center;
				}
				.title {
					display: flex;
					margin-bottom: 15px;

					.owner {
						width: 65px;
						height: 22px;
						background-color: $theme-color-1;
						color: #fff;
						font-size: 14px;
						line-height: 22px;
						text-align: center;
					}
					.is-default {
						width: 65px;
						height: 22px;
						background-color: #0085E8;
						border-radius: 50px;
						color: #fff;
						font-size: 14px;
						line-height: 22px;
						text-align: center;
						margin-left: 15px;
					}
				}
				.address {
					display: flex;
					justify-content: space-between;
				}
				.btns {
					width: 30%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					position: absolute;
					right: 15px;
					// top: 50%;
					// margin-top: -22px;
					bottom: 15px;
					.btn {
						margin-left: 15px;
					}
				}
			}
		}
	}
</style>
